<template>
  <div class="addkeytk">
    <div class="tk_hed">
      <span class="addtit">添加关键词</span>
      <span class="ico" @click="close">
        <a-icon type="close" />
      </span>
    </div>
    <div class="keywords">
      <span>自定义</span>
    </div>
    <div class="textarea">
      <!-- onkeyup="this.value=this.value.replace(/[, ]/g,'')" -->
      <a-textarea
        v-model="keywords"
        onkeyup="this.value=this.value.replace(/[,]/g,'')"
        placeholder="批量添加时,每行输入一个关键词或多个关键词,用逗号或者空格隔开,每个关键词长度不能超过50字段,否则会被直接过滤；"
        name
        id
        cols="30"
        rows="10"
      ></a-textarea>
    </div>
    <div class="fot_btn">
      <a-button type="primary" @click="subsav">保存</a-button>
      <a-button @click="czcls">重置</a-button>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      keywords:
        this.$store.state.xiugaiflag != "" ? this.$parent.keyvalue.keywords : ""
    };
  },

  methods: {
    close() {
      this.$store.state.tjwz = false;
      this.keywords = "";
      this.$store.state.xiugaiflag = "";
    },
    subsav() {
      if (this.$store.state.xiugaiflag == "") {
        if (this.keywords) {
          this.keywords = this.keywords.replace(new RegExp(/( )/g), "|");
          this.keywords = this.keywords.replace("，", "|");
          this.axios
            .post(
              "seo/KeyWordsAdd.php",
              qs.stringify({
                sqdwid: this.$store.state.bbl_sqdwid,
                keywords: this.keywords
              })
            )
            .then(res => {
              console.log(res);
              if (res.data.code == 303) {
                this.$store.state.tjwz = false;
                this.keywords = "";
                this.$store.state.xiugaiflag = "";
                this.$parent.handleChangelist(this.$parent.pagination);
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg,
                  duration: 1.5
                });
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg,
                  duration: 1.5
                });
              }
            });
        }
      } else {
        this.axios
          .post(
            "seo/KeyWordsAdd.php",
            qs.stringify({
              sqdwid: this.$store.state.bbl_sqdwid,
              keywords: this.keywords
            })
          )
          .then(res => {
            console.log(res);
          });
      }
    },
    czcls() {
      this.keywords = "";
    }
  },

  created() {}
};
</script>

<style lang='less'>
.addkeytk {
  width: 30%;
  background-color: #fff;
  height: 500px;
  text-align: left;
  .tk_hed {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 24px;
    border-bottom: 1px solid #f1f1f1;
    background-color: #fbfbfb;
    .addtit {
      font-size: 17px;
    }
    .ico {
      cursor: pointer;
      i {
        font-size: 22px;
      }
    }
  }
  .keywords {
    border-bottom: 1px solid #f1f1f1;
    height: 50px;
    line-height: 50px;
    margin: 10px 0;
    span {
      display: inline-block;
      border: 1px solid #f1f1f1;
      padding: 0 24px;
      border-bottom: 0;
    }
  }
  .textarea {
    padding: 10px;
  }
  .fot_btn {
    padding: 25px 20px;
    button {
      margin: 0 10px;
    }
  }
}
</style>
